{% extends 'common/base.html' %}
{% load staticfiles %}
{% load style_filter %}

{#标题#}
{% block title %}{{ title }}{% endblock title %}
{#顶部css#}
{% block head_css %}
    <link rel="stylesheet" href="{% static 'css/swipebox.css' %}">
{% endblock %}
{#顶部js#}
{% block head_js %}
    <script type="text/javascript" src="{% static 'js/jquery-1.9.0.min.js' %}"></script>
	<script src="{% static 'js/ios-orientationchange-fix.js' %}"></script>
	<script type="text/javascript">
		jQuery(function ($) {
			$(".swipebox").swipebox();
		});
	</script>
{% endblock head_js %}

{#body主体#}
{% block body %}

<a href="{% url 'server:all' 0 %}"><img src="{% static 'images/server_bg.png' %}"></a>

<div class="bar_line">
    <p>{{ title }}</p>
</div>

<div class="main">
    <div class="wrap">
        <div class="about-top">
            <div class="about">


                <div class="section group">

                    {% for s in servers %}
					<div class="grid_1_of_4 images_1_of_4"  {% if forloop.counter0|change_style %}style="margin-left: 0" {% endif %}>
						<a href="{% url 'server:one' param %}?id={{ s.id }}" target="_blank"> <img src="{% static s.img %}" alt=""><span class="zoom-icon"></span> </a>
						<h4>{{ s.title }}</h4>
                        <h5>{{ s.update_time }}</h5>
						<p>{{ s.short }}</p>
						<a href="{% url 'server:one' param %}?id={{ s.id }}" class="link">查看更多</a>
					</div>
                    {% endfor %}

                </div>

            </div>
        </div>
    </div>
</div>


    {#        页码#}
    <div class="pagenation">

        {% if servers.has_previous %}
            <a href="{% url 'server:all' param %}?page={{ servers.previous_page_number }}">上一页</a>
        {% endif %}

        {% for index in paginator.page_range %}
            <a {% if index == servers.number %}class="active" {% endif %}href="{% url 'server:all' param %}?page={{ index }}">{{ index }}</a>
        {% endfor %}

        {% if servers.has_next %}
            <a href="{% url 'server:all' param %}?page={{ servers.next_page_number }}">下一页</a>
        {% endif %}
    </div>

{% endblock body %}